<template>
  <!-- 评论区 -->
  <div>
    <el-row>评论</el-row>
    <el-row class="textarea">
      <el-tag
        type="info"
        :closable="true"
        :disable-transitions="true"
        @close="tagClick()"
        v-show="!isshow"
      >回复 @ {{nickname}}</el-tag>
      <el-input
        type="textarea"
        :rows="2"
        placeholder="说点什么吧"
        v-model="from.textarea"
        resize="none"
        ref="callReply"
      ></el-input>
    </el-row>
    <el-row type="flex" class="uploadpPictures">
      <!-- 图片上传 -->
      <el-col :span="23">
        <el-upload
          :action="$axios.defaults.baseURL + '/upload'"
          name="files"
          :file-list="from.cover"
          :on-success="uploadPictures"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt />
        </el-dialog>
      </el-col>
      <!-- 按钮 -->
      <el-col :span="2">
        <el-button type="primary" size="small" @click="toSendComments">提交</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  props: ["commentId", "nickname"],
  data() {
    return {
      //   图片
      dialogImageUrl: "",
      dialogVisible: false,
      isShow: true,
      from: {
        cover: [], //图片
        textarea: "" //评论
      }
    };
  },
  watch: {
    commentId() {
      console.log(this.commentId);

      if (this.commentId !== "") {
        this.$refs.callReply.focus();
      }
    }
  },
  methods: {
    // 关闭tag
    tagClick() {
      this.nickname = "";
      this.isShow = false;
    },

    //发送评论
    toSendComments() {
      this.$refs.callReply.focus();
      const formdata = new FormData();
      formdata.append("files", this.from.cover);
      if (!this.from.textarea) {
        this.$message({
          message: "内容不能为空",
          type: "error"
        });
        return;
      } else {
        this.$axios({
          url: "/comments/",
          method: "post",
          headers: {
            Authorization: "Bearer " + this.$store.state.user.userInfo.token,
            "Content-Type": "application/json"
          },
          data: {
            post: this.$route.query.id,
            content: this.from.textarea,
            pics: this.from.cover,
            follow: this.commentId
          }
        }).then(res => {
          console.log(res);
          if (res.data.message == "提交成功") {
            this.$message({
              message: "评论成功",
              type: "success"
            });
          }
          //输入完清空
          this.from.textarea = "";
          this.$emit("newComment");
        });
      }
    },
    //上传图片
    uploadPictures(response, file, fileListt) {
      console.log("图片上传成功");
      console.log(response);
      //把id和拼接好的url给到cover数组

      file.id = response[0].id;
      file.url = this.$axios.defaults.baseURL + response[0].url; // 上传完毕的 url 是不完整的相对路径,需要拼接上 基准路径
      this.from.cover.push(file);
    },

    handleRemove(file, fileList) {
      console.log(file);
      console.log(fileList);
      this.from.cover = fileList;
    },
    handlePictureCardPreview(file) {
      console.log(file);

      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    }
  }
};
</script>

<style lang="less" scoped>
//按钮
.uploadpPictures {
  margin: 10px 0;
}
</style>